<template>
    <div class="register">
        <div class="logo">
            <img src="~assets/imgs/global/logo.png" alt="" />
        </div>
        <div class="signin_options">
            <div class="username">
                <img src="~assets/imgs/global/username.svg" alt="" />
                <input type="text" v-model="username" />
            </div>
            <div class="password">
                <img src="~assets/imgs/global/password.svg" alt="" />
                <input type="password" v-model="password" />
            </div>
            <div class="confirm">
                <img src="~assets/imgs/global/confirm.svg" alt="" />
                <input type="password" v-model="confirm" />
            </div>
            <div class="identify">
                <input
                    v-model="identify"
                    class="input_val"
                    type="text"
                    placeholder="请输入验证码"
                />
                <sidentify></sidentify>
            </div>
            <div class="submit">
                <van-button
                    :loading="loading"
                    type="submit"
                    class="sub_but"
                    @click="submitForm()"
                >
                    Register
                </van-button>
            </div>
        </div>
    </div>
</template>

<script>
const PassReg = /^(?![A-Z]+$)(?![a-z]+$)(?![0-9]*$)(?![@#￥%^&_+-/=?]+$).{8,16}$/;
import Sidentify from "components/common/sidentify";
export default {
    name: "Register",
    data() {
        return {
            loading: false,
            username: "",
            password: "",
            confirm: "",
            identify: "",
            isSuccess: false,
        };
    },
    methods: {
        //清空表单
        clear() {
            this.username = "";
            this.password = "";
            this.confirm = "";
            this.identify = "";
        },
        //注册验证方法
        verify() {
            this.isSuccess = false;
            if (
                !this.username ||
                !this.password ||
                !this.confirm ||
                !this.identify
            ) {
                this.loading = false;
                this.$toast.fail("请输入完整信息");
                return;
            } else if (
                this.username.length > 10 ||
                this.username.length < 3 ||
                this.password.length > 10 ||
                this.password.length < 3
            ) {
                this.loading = false;
                this.$toast.fail("用户名/密码必须在3-10个字符之间");
                return;
            } else if (!PassReg.test(this.password)) {
                this.loading = false;
                this.$toast.fail("密码由数字，英文，特殊字符其中两项组成");
                return;
            } else if (this.password !== this.confirm) {
                this.loading = false;
                this.$toast.fail("两次密码必须一致");
                return;
            } else if (
                this.identify.toLowerCase() !==
                this.$children[0].show_num.toString().replace(/,/gi, "")
            ) {
                this.loading = false;
                this.$toast.fail("验证码错误");
                this.identify = "";
                this.$children[0].draw();
                return;
            } else {
                this.isSuccess = true;
            }
        },
        //提交表单
        submitForm() {
            this.loading = true;
            this.verify();
            let registerData = {
                username: this.username,
                password: this.password,
            };
            if (this.isSuccess) {
                //表单填写成功，发送请求
                this.$axios
                    .post("user/register", registerData)
                    .then((res) => {
                        this.loading = false;
                        this.clear();
                        if (res.status === 200) {
                            this.$toast.success("注册成功");
                            this.$router.push("/signin");
                        } else {
                            this.$toast.fail("注册失败");
                            return false;
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            }
            //表单填写失败
            else {
                return false;
            }
        },
    },
    components: {
        Sidentify,
    },
};
</script>

<style lang="less" scoped>
.register {
    width: 100vw;
    height: 100vh;
    z-index: 999;
    position: absolute;
    background-color: white;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 0.4rem;
    line-height: 0.6rem;
    img {
        width: 0.6rem;
    }
    .logo {
        flex: 2;
        overflow: hidden;
        img {
            display: block;
            width: 2rem;
            margin: 0.5rem auto;
        }
    }
    @media screen and(min-width:540px) {
        .logo {
            flex: 0;
        }
    }
    .signin_options {
        overflow: hidden;
        flex: 3;
        margin: 0 auto;
        width: 80vw;
        height: 6rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        input {
            border: 0;
            border-bottom: 1px solid black;
            text-indent: 0.2rem;
        }
        .username {
            flex: 1;
            margin: 0 0.2rem;
        }
        .password {
            flex: 1;
            margin: 0 0.2rem;
        }
        .confirm {
            flex: 1;
            margin: 0 0.2rem;
        }
        .identify {
            flex: 1;
            margin: 0 auto;
            font-size: 0.3rem;
            .input_val {
                width: 50%;
                float: left;
            }
        }
        .submit {
            flex: 2;
            width: 100%;
            height: 0.8rem;
            .sub_but {
                width: 100%;
                height: 0.8rem;
                margin: 0 auto;
                line-height: 0.8rem;
                border-radius: 0.4rem;
                border: 1px solid #23b7cb;
                background-color: #23b7cb;
                span {
                    font-size: 0.4rem;
                }
            }
        }
    }
}
</style>
